<template>
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入城市名称"
    @select="handleSelect"
    hide-loading
  >
    <template #suffix>
      <el-icon>
        <Search />
      </el-icon>
    </template>
    <!-- 自定义建议项模板 -->
    <template #default="{ item }">
      <!--      <div></div>-->
      <div style="font-size: 12px; color: #999">
        {{ item.adm1 }}-{{ item.adm2 }}-{{ item.name }}
      </div>
    </template>
  </el-autocomplete>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useWeatherStore } from '@/stores/weather'
import { WeatherService } from '@/services/weatherService'
import type { ICityData } from '@/types/weather'
// 定义事件
const weatherStore = useWeatherStore()

// 定义autocomplete组件需要的建议项接口
interface IAutocompleteItem extends ICityData {
  value: string // 用于autocomplete组件显示的值
}

let tempData: ICityData[] = []

const state = ref('')

// 缓存上一次查询的关键字和结果
let lastQuery = ''
let lastResults: IAutocompleteItem[] = []

/**
 * 异步获取城市搜索建议项
 * @param queryString 用户输入的查询字符串
 * @param cb 回调函数，用于返回建议项数据
 */
const querySearchAsync = async (queryString: string, cb: (arg: IAutocompleteItem[]) => void) => {
  // 如果查询字符串为空，显示tempData中的所有预定义数据
  if (!queryString) {
    const results = tempData.map((item) => ({
      ...item,
      value: item.name, // 添加value属性，用于autocomplete组件
    }))
    cb(results as IAutocompleteItem[])
    return
  }

  // 如果查询字符串没有变化，直接返回上次的结果
  if (queryString === lastQuery) {
    cb(lastResults)
    return
  }

  // 只有当查询字符串变化时才发送API请求
  try {
    const locations = await WeatherService.searchLocation(queryString)
    // 确保正确处理API返回的数据
    if (locations && locations.length > 0) {
      tempData = locations
    }
  } catch (error) {
    console.error('获取城市数据失败:', error)
    tempData = []
  }

  // 根据查询字符串过滤城市数据
  const results = tempData.filter(createFilter(queryString)).map((item) => ({
    ...item,
    value: item.name, // 添加value属性，用于autocomplete组件
  }))

  // 缓存当前查询和结果
  lastQuery = queryString
  lastResults = results as IAutocompleteItem[]

  cb(results as IAutocompleteItem[])
}

/**
 * 创建城市过滤函数
 * @param queryString 查询字符串
 * @returns 过滤函数
 */
const createFilter = (queryString: string) => {
  return (city: ICityData) => {
    // 判断城市名称是否包含查询字符串（不区分大小写）
    return city.name.toLowerCase().includes(queryString.toLowerCase())
  }
}

/**
 * 处理选择城市建议项的回调函数
 * @param item 选中的城市项
 */
const handleSelect = async (item: IAutocompleteItem) => {
  // console.log('选中的城市:', item)
  // 在实际应用中，这里可以触发跳转到对应城市天气页面的逻辑
  state.value = item.name

  try {
    // 搜索并添加位置到store
    await weatherStore.searchAndAddLocation(item.name)
  } catch (error) {
    console.error('添加位置失败:', error)
  }
}
</script>

<style scoped lang="scss">
/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.el-autocomplete) {
    width: 100%;
  }

  :deep(.el-input__wrapper) {
    font-size: 14px;
  }

  :deep(.el-input__inner) {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  :deep(.el-input__wrapper) {
    font-size: 12px;
  }

  :deep(.el-input__inner) {
    font-size: 12px;
  }

  :deep(.el-autocomplete-suggestion) {
    font-size: 12px;
  }
}
</style>
